<style lang="scss" scoped>
    @import '../../css/training.scss';
    @import '../../css/exam2.scss';
    .exam-create-box{background: #fff;padding:30px;}
    .ec-destit{width: 100%;  height: 42px;background: #fff; position: relative;}
    .inpDiv{margin-right: 52px;}

    .hide{display: none;}


</style>

<style>
    .ec-destit .el-input__inner{width: 100%;height: 42px;}
    .ec-destit .el-input{width: 100%}

</style>

<!--生成试卷（可编辑）-->
<template>
    <section>

        <section v-show="hasExamLibID" class="exam-create-box mt">

            <section class=" ec-destit">
                <div class="inpDiv">
                    <el-input v-model="trainTestInfo.ExamTitle" :disabled="one.modifyFlag == false" @focus="oneFocus" placeholder="请输入试卷名称"></el-input>
                    <span class="ec-edit ml20" v-show="one.modifyFlag == false" @click="one.modifyFlag = true"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/compile_ic.png" alt=""></span>
                    <span class="ec-edit ml20" v-show="one.modifyFlag == true" @click="doSaveOne"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/save-ic.png" alt=""></span>
                </div>
            </section>

            <p class="mt20 mb20">合格分数：90</p>
            <p class="mt">考试时长：3小时</p>
            <section class="mt20 mb20 ec-destit">
                <section class="inpDiv">
                    <el-input placeholder="请输入对试卷的描述" v-model="trainTestInfo.ExamDesc" :disabled="two.modifyFlag == false" @focus="handleFocus"></el-input>
                    <span class="ec-edit ml20" v-show="two.modifyFlag == false" @click="two.modifyFlag = true"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/compile_ic.png" alt=""></span>
                    <span class="ec-edit ml20" v-show="two.modifyFlag == true" @click="doSaveTwo"><img class="public-icon" src="http://jhsy-img.caizhu.com/sass/images/save-ic.png" alt=""></span>
                </section>
            </section>

            <section style="background: #f7f8fa;" class="topic-types pb20">
                <!--试题-->
                <!--<ul>
                    <li>
                        <section class="edit-status1 clearfix" >
                            <div style="width:50px;" class="question-leftccol fl">
                                <span>Q1</span>
                                <span><img class="public-icon mt20" src="http://jhsy-img.caizhu.com/sass/images/compile_ic.png" alt=""></span>
                                <span><img class="public-icon mt20" src="http://jhsy-img.caizhu.com/sass/images/Training-ic-down.png" alt=""></span>
                                <span><img class="public-icon mt20" src="http://jhsy-img.caizhu.com/sass/images/delete_ic.png" alt=""></span>
                            </div>
                            <div class="p-relative mt" style="margin-left: 50px;">
                                <div class="question-content mt20">
                                    <p class="question-topic">
                                        <span>1</span>
                                        <span>【单选题】</span>
                                        <span>迟到几次不扣工资</span>
                                    </p>
                                    <ul class="question-options">
                                        <el-radio-group v-model="questionAnswer">
                                            <li class="mt20 fs-14">
                                                <el-radio label="1" disabled >A<span class="ml20"></span>1次</el-radio>
                                            </li>
                                            <li class="mt20 fs-14">
                                                <el-radio label="2" disabled >B<span class="ml20"></span> 1次</el-radio>
                                            </li>
                                            <li class="mt20 fs-14">
                                                <el-radio label="3" disabled >C<span class="ml20"></span>1次</el-radio>
                                            </li>
                                            <li class="mt20 fs-14">
                                                <el-radio label="4" disabled>D<span class="ml20"></span>1次</el-radio>
                                            </li>
                                        </el-radio-group>
                                    </ul>
                                </div>
                                <div class="p-absolute answers-score">（10分）</div>
                            </div>
                        </section>

                        多选题添加完成后的状态
                        <section class="edit-status2">
                        2222
                        </section>

                        问答题添加框添加完成后的状态
                        <section class="edit-status2">
                        2222
                        </section>

                    </li>
                </ul>-->

                <section v-for="item,$index in outer">
                    <section v-show="item.modifyFlag == false">  <!-- 显示状态 -->
                        <div class="exam-one clearfix mt20" v-if="item.QuestionType!=3">
                            <div class="examo-lef">
                                <div class="">Q{{$index+1}}</div>
                                <div class="examo-do examo-edit mt" @click="editOne($index)"></div>
                                <div class="examo-do examo-del" @click="delOne"></div>
                            </div>
                            <div class="examo-rig">
                                <!-- 标题 -->
                                <div class="examo-tit examo-line  clearfix">
                                    <div class="examo-f01">
                                        <span v-if="item.QuestionType==1">【多选题】</span>
                                        <span v-else>【单选题】</span>

                                        <span class="">{{item.QuestionTitle}}</span>
                                    </div>
                                    <div class="examo-f02">
                                        <span>{{item.RightScore}}</span>
                                        <span>分</span>
                                    </div>
                                </div>
                                <!-- 选项 -->
                                <<div class="examo-one examo-line mt20 clearfix" v-for="one,iIndex in item.Answers">
                                    <div class="examo-f00">
                                        <el-radio v-model.number="item.RightAnswerIndexs" :label="iIndex" v-if="item.QuestionType==2" disabled="true">{{answerArr[iIndex]}}</el-radio>
                                        <label v-else disabeld>
                                            <span class="exam-checkbox" :class="judgeCheckOn(iIndex, item.RightAnswerIndexs)?'checked':''"></span>
                                        </label>
                                        <span>{{one.AnswerValue}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 问答题 -->
                        <div class="exam-one clearfix mt20" v-else>
                            <div class="examo-lef">
                                <div class="">Q{{index+1}}</div>
                                <div class="examo-do examo-edit mt" @click="editOne(index)"></div>
                                <div class="examo-do examo-del" @click="delOne(index)"></div>
                            </div>
                            <div class="examo-rig">

                                <div class="examo-one examo-line clearfix">
                                    <div class="examo-f00">
                                        <!--<el-input class="examo-inp00" placeholder="标题"></el-input>-->
                                        {{item.QuestionTitle}}
                                    </div>
                                    <div class="examo-f01">
                                        <span>【问答题】</span>
                                    </div>
                                    <div class="examo-f02">
                                        <span>{{item.RightScore}}</span>
                                        <span>分</span>
                                    </div>
                                </div>
                                <div class="mt20">
                                    <!--{{item.Answers[0].AnswerValue}}-->
                                    <!--<el-input type="textarea" :rows="5" placeholder="请输入问答答案...">
                                    </el-input>-->
                                </div>
                            </div>
                        </div>

                    </section>
                    v-show="item.modifyFlag == true"
                    <section >   <!-- 编辑状态 -->
                        <div class="exam-one clearfix mt20" v-if="item.QuestionType!=3">
                            <div class="examo-lef">
                                <div class="">Q{{$index+1}}</div>
                                <!--<div class="examo-do examo-edit mt"></div>
                                <div class="examo-do examo-del"></div>-->
                            </div>
                            <div class="examo-rig">
                                <!-- 标题 -->
                                <div class="examo-tit clearfix">
                                    <div class="examo-f00">
                                        <el-input class="examo-inp00" placeholder="标题" v-model="item.QuestionTitle"></el-input>
                                    </div>
                                    <div class="examo-f01">
                                        <span v-if="item.QuestionType==1">【多选题】</span>
                                        <span v-else>【单选题】</span>
                                    </div>
                                    <div class="examo-f02">
                                        <span>分值</span>
                                        <el-input class="examo-inp01" v-model="item.RightScore"></el-input>
                                        <span>分</span>
                                    </div>
                                </div>
                                <!-- 选项 -->
                                <div class="examo-one mt20 clearfix" v-for="one,iIndex in item.Answers">
                                    <div class="examo-f00">

                                        <!--<span v-if="outer.QuestionType==2"><el-radio disabled="true"></el-radio></span>
                                        <span v-else><el-checkbox disabled></el-checkbox></span>-->
                                        <el-radio v-model="item.RightAnswerIndexs" :label="iIndex" v-if="item.QuestionType==2">{{answerArr[iIndex]}}</el-radio>
                                        <label @click="checkAnswerOne(iIndex, item.RightAnswerIndexs, index, 3)" v-else>
                                            <span class="exam-checkbox" :class="judgeCheckOn(iIndex, item.RightAnswerIndexs)?'checked':''"></span>
                                            <span>{{answerArr[iIndex]}}</span>
                                        </label>

                                        <!--<span class="mr">{{answerArr[iIndex]}}</span>-->
                                        <el-input class="examo-inp02 ml" placeholder="标题" v-model="one.AnswerValue"></el-input>

                                    </div>
                                    <div class="examo-f01">

                                        <el-radio v-model="item.RightAnswerIndexs" :label="iIndex" v-if="item.QuestionType==2">设为答案</el-radio>
                                        <label @click="checkAnswerOne(iIndex, item.RightAnswerIndexs, index, 3)" v-else>
                                            <span class="exam-checkbox" :class="judgeCheckOn(iIndex, item.RightAnswerIndexs)?'checked':''"></span>
                                            <span>设为答案</span>
                                        </label>

                                        <!--<el-radio label="1">设为答案</el-radio>-->
                                    </div>
                                    <div class="examo-f02">
                                        <span class="examo-do examo-tot"></span>
                                        <span class="examo-do examo-tob"></span>
                                        <span class="examo-do examo-del" @click="delAnswerOne(index,iIndex)"></span>
                                    </div>
                                </div>
                                <!-- 添加按钮 -->
                                <div class="examo-add mt20" @click="addAnswerOne(index)">+添加选项</div>
                                v-if="item.modifyFlag"
                                <div class="examo-save mt20" @click="saveAnswerOne($index, item.QuestionType)" >保存</div>
                                v-if="cancelOneFlag"
                                <div class="examo-cancel mt20 ml" @click="cancelAnswerOne(index)" >取消</div>
                            </div>
                        </div>
                        <!-- 问答题 -->
                        <div class="exam-one clearfix mt20" v-else>
                            <div class="examo-lef">
                                <div class="">Q{{index+1}}</div>
                                <div></div>
                                <div></div>
                            </div>
                            <div class="examo-rig">

                                <div class="examo-one clearfix">
                                    <div class="examo-f00">
                                        <el-input class="examo-inp00" placeholder="标题" v-model="outer.QuestionTitle"></el-input>
                                    </div>
                                    <div class="examo-f01">
                                        <span>【问答题】</span>
                                    </div>
                                    <div class="examo-f02">
                                        <span>分值</span>
                                        <el-input class="examo-inp01" v-model="outer.RightScore"></el-input>
                                        <span>分</span>
                                    </div>
                                </div>
                                <div class="mt20">
                                    <!--<el-input type="textarea" :rows="5" placeholder="请输入问答答案..." v-model="outer.Answers[0].AnswerValue">
                                    </el-input> -->
                                </div>
                                <div class="examo-save mt20" @click="saveAnswerOne(index, outer.QuestionType)" v-if="outer.editFlag">保存</div>
                            </div>
                        </div>
                    </section>

                </section>

            </section>

            <!--添加按钮-->
            <section class="addTypesBtn mt20" @mouseover="actionBtn" @mouseleave="offBtn">
                <section class="addTypesBtn-on" v-show="showTopicSingleBtn">
                    <img src="http://jhsy-img.caizhu.com/sass/images/Training-ic-increase.png" alt="">
                    <span class="fs-14 add-topic ml20 p-relative">
                                    <img class="p-absolute single_ic" style="top: 13px;left: -10px;" src="http://jhsy-img.caizhu.com/sass/images/single_ic.png" alt="">添加题目
                                </span>
                </section>

                <section v-show="showTopicTypesBtn">
                    <!--<span class="mr"><img src="http://jhsy-img.caizhu.com/sass/images/Training-ic-increase.png" alt=""></span>-->
                    <span class="question-types-btn mr" @click="addEventRadio">
                                    <img src="http://jhsy-img.caizhu.com/sass/images/Training-ic-increase.png" alt="">
                                    <span class="fs-14">单选题</span>
                                </span>
                    <span class="question-types-btn mr" @click="addEventMulti">
                                    <img src="http://jhsy-img.caizhu.com/sass/images/Training-ic-increase.png" alt="">
                                    <span class="fs-14">多选题</span>
                                </span>
                    <span class="question-types-btn" @click="addEventSubItem">
                                    <img src="http://jhsy-img.caizhu.com/sass/images/Training-ic-increase.png" alt="">
                                    <span class="fs-14">问答题</span>
                                </span>
                </section>
            </section>

            <!--试卷详情-->
            <section class="mt">
                <p class="pt20 pb20">试卷详情</p>
                <table class="exam-detail-table fs-14">
                    <thead>
                    <tr class="">
                        <th>题型</th>
                        <th>单选题</th>
                        <th>多选题</th>
                        <th>问答题</th>
                    </tr>
                    </thead>
                    <tbody>

                    <tr>
                        <th>题数</th>
                        <td>1道</td>
                        <td>5道</td>
                        <td>7道</td>
                    </tr>
                    <tr>
                        <th>分值</th>
                        <td>1道</td>
                        <td>5道</td>
                        <td>7道</td>
                    </tr>
                    <tr>
                        <th>合计</th>
                        <td colspan="2" ></td>
                        <td>卷面总计30分</td>
                    </tr>
                    </tbody>
                </table>
            </section>

        </section>

    </section>
</template>

<script>

	import qs from 'qs'

	let answerArr = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'G', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];

	export default{
		data: function(){
			return {

				hasExamLibID : '', // 0 无试卷  1 有试卷

				trainTestInfo:'', // 培训试卷详情

                one:{
					modifyFlag: false, // 编辑（生成好的试卷）标题   false无编辑  true 正在编辑
                },
                two:{
					modifyFlag: false, // 编辑（生成好的试卷）描述   false无编辑  true 正在编辑
                },

                outer:{
					modifyFlag: false, // 编辑框左边按钮 false 无编辑 true 正在编辑
					QuestionType : '', // 2 单选题 1 多选题 3问答题
                },

				answerArr: answerArr,  // 选项字母

				cancelOneFlag: false,      // 编辑题目时取消编辑  添加题目时取消添加题目
				editTip: '题目请编辑完整，才可以开始其他操作哦！',


            }
		},
		mixins: [mixinMethods],
		methods: {
            isHasExamLibID(){  // 判断是否存在试卷
				let ExamID = this.$route.query.ExamID;
				console.log(ExamID);
				if(ExamID == 0){
//					this.hasExamLibID = 0;
					location.assign('/training/exam'); // 新建试卷
                }else if(ExamID > 0){
					this.hasExamLibID = 1;

					axios.post('/com/exam/get', qs.stringify({ // com/exam/get 这个才是正确的接口----
						examID : ExamID,
                    })).then( (res) => {
                        var d = res.data;
                        if(d.flag == 1){
                        	console.log(d);
							this.trainTestInfo = d.data; //
							console.log('hhhhhhhh');
							if(d.data.Questions.length > 0){
								d.data.Questions.forEach(one=>{
									one.modifyFlag = false;  // 初始状态---无编辑
								});
							}
							this.outer = d.data.Questions;
							console.log(this.outer);
                        }
                    } );

                }
            },

            doSaveOne(){  // 保存编辑后的标题
				let ExamID = this.$route.query.ExamID;
				axios.post('/com/exam/edit', qs.stringify({
					examID: ExamID,
					examTitle: this.trainTestInfo.examTitle,
				})).then( (res) => {
					var d = res.data;
					if(d.flag == 1){
						console.log('哈哈哈哈');
						console.log(d);
						this.$message.success('编辑成功');
						this.one.modifyFlag = false;
					}else{
						this.one.modifyFlag = false;
						this.$message.error(d.msg);
					}
				} );
            },

			doSaveTwo(){ // 保存编辑后的描述
				let ExamID = this.$route.query.ExamID;
				axios.post('/com/exam/edit', qs.stringify({
					examID: ExamID,
//					examTitle: this.trainTestInfo.examTitle,
					examDesc: this.trainTestInfo.examDesc,
                })).then( (res) => {
                    var d = res.data;
                    if(d.flag == 1){
                    	console.log('哈哈哈哈');
                    	console.log(d);
                    	this.$message.success('编辑成功');
                    	this.two.modifyFlag = false;
                    }else{
						this.two.modifyFlag = false;
                    	this.$message.error(d.msg);
                    }
                } );
            },

			oneFocus(){
				this.one.modifyFlag = true;
            },
			handleFocus(){
			    this.two.modifyFlag = true;
            },

//            以上的方法是-----exam方法里没有的

			/* 多选重置设置 */
			judgeCheckOn: function(index, arr){      // 判断选项多选是否选中
				if(arr.indexOf(index) > -1){
					return true;
				}
				return false;
			},

			editOne(index){  // 编辑（生成的试卷）一道题
				console.log('ddddd - one');

				console.log(this.outer[index].modifyFlag);

				if(this.outer.modifyFlag){
					this.$message(this.editTip);
					return ;
				}
				console.log(this.outer[index]);
				console.log(this.outer[index].modifyFlag);
				this.outer[index].modifyFlag = true;
			},

			saveAnswerOne: function(outerIndex, type){   // 保存（生成的试卷）一道题     type 1,多选 2,单选 3 问答
				var status = this.judgeOkOne(outerIndex, type),
					flag = status.flag;

				if(flag){
					this.outer[outerIndex].modifyFlag = false;
					this.modifyFlag = false;
					this.cancelOneFlag = false;
				}else{
					this.$message.error(status.msg);
				}
			},

			judgeOkOne: function(outerIndex, type){     // 判断一试题是否编辑完全

				//return true;

				var one = this.form.Questions[outerIndex],
					answers = one.Answers,
					len = answers.length,
					status = {flag: true, msg: ''};

				if(type == 3){   // 问答
					if(!one.QuestionTitle) return {flag: false, msg: '请输入标题'};
				}else{  // 单选 + 多选
					if(!one.QuestionTitle) return {flag: false, msg: '请输入标题'};
					if(!one.RightScore) return {flag: false, msg: '请输入分数'};
					if(type==1){
						if(one.RightAnswerIndexs.length==0) return {flag: false, msg: '请选择正确答案'};
					}else if(type==2){
						if(one.RightAnswerIndexs==='') {
							return {flag: false, msg: '请选择正确答案'};
						}
					}
					for(var i= 0; i<len; i++){
						if(!answers[i].AnswerValue){
							return {flag: false, msg: '请输入问题描述'};
						}
					}
				}
				return status;
			},



		},
		mounted: function(){
			this.isHasExamLibID();

			/*axios.post('/xxx', qs.stringify({})).then( (res) => {
                var d = res.data;
                if(d.flag == 1){
                }
            } )*/
		},
		directives: {
			focus: {
				// 指令的定义
				inserted: function (el) {
					el.focus()
				}
			}
		},

	}


</script>
